html, body {
    background-color: #f5f5f5;
}
.back {
    position: fixed;
    left: 0;
    z-index: 99;
    .back-cont {
        width: 36px;
        height: 36px;
        line-height: 36px;
        border-radius: 50%;
    }
}
.banner {
    .slide-img {
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .swiper-container{
        --swiper-pagination-color: var(--pink);/* 两种都可以 */
    }
}

div.content {
    .top {
        border-bottom: 1px solid #eee;
        .name {
            padding-bottom: 15px;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -ms-flex-direction: row;
            -webkit-flex-direction: row;
                    flex-direction: row;
            -ms-flex-pack: start;
                -webkit-justify-content: flex-start;
                    justify-content: flex-start;
        }
    }
    .bottom {
        padding: 15px;
        margin-bottom: 10px;
    }
}

.tab {
    .tab_top {
        height: 36px;
        line-height: 36px;
        .item {
            border-bottom: 1px solid #eee;
        }
        .item.active {
            color: var(--pink)!important;
            border-bottom-color: var(--pink);
        }
    }
    .tab_record {
        padding: 15px 15px 15px 5px;
        .item {
            padding: 0 0 10px 10px;
            .avatar {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                margin: auto;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
            }
        }
    }
    .tab_cont {
        .tab_desc {
            .title {
                font-size: 14px;
            }
            .desc {
                font-size: 12px;
            }
        }
    }
    .sign {
        padding: 50px 25px;
        .login_btn,
        .register_btn {
            width: 100px;
            height: 36px;
            line-height: 36px;
            border-radius: 4px;
            margin: auto;
        }
        .login_btn {
            border: 1px solid var(--pink);
        }
    }
}
.fixed {
    z-index: 1100;
    .content {
        height: 50px;
        line-height: 50px;
        .btn {
           height: 50px;
           line-height: 50px;
           border-radius: 0;
        }
        .lt {
            background-color: #444;
            padding-left: 20px;
        }
        .time_btn {
            background-color: #000;
        }
    }
}

.sz_taobao {
    .bg {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 100;
        background-color: rgba(0, 0, 0, 0.5)
    }
    .sz_taobao_content {
        position: fixed;
        top: 50%;
        right: 10%;
        left: 10%;
        z-index: 100001;
        -webkit-transform: translateY(-50%);
           -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
             -o-transform: translateY(-50%);
                transform: translateY(-50%);
        background-color: #fff;
        border-radius: 6px;
        .title {
            height: 36px;
            line-height: 36px;
            border-radius: 6px 6px 0 0;
        }
        .content {
            .choose-item {
                border-bottom: 1px solid #eee;
            }
            .add_btn {
                border-radius: 4px;
                padding: 0 10px;
                margin-top: 10px;
            }
        }
        .bb {

            .btn {
                height: 40px;
                line-height: 40px;
                border-top: 1px solid #eee;
            }
            .confirm_btn {
                border-radius: 0 0 0 5px;
            }
            .close_btn {
                border-radius: 0 0 5px 0;
            }
        }
    }
}
.super_sy,
.sy_detail {
    .good_t {
        padding: 10px;
        .good-img {
            position: relative;
            width: 100%;
            height: 0;
            overflow: hidden;
            margin: 0;
            padding-bottom: 100%; /* 关键就在这里 */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .good_cont {
            .name {
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: row;
                    -ms-flex-direction: row;
                        flex-direction: row;
                -webkit-justify-content: flex-start;
                    -ms-flex-pack: start;
                        justify-content: flex-start;
                img {
                    width: 18px;
                    height: 18px;
                }
            }
        }
    }
}
div.super_sy {
    .good_b {
        padding: 10px;
        .tag {
            .item {
                padding: 0 5px;
                border-radius: 4px;
            }
        }
    }
    .hd {
        .btn {
            width: 180px;
            height: 36px;
            line-height: 36px;
            border-radius: 4px;
            margin: auto;
        }
    }

    .sign {
        padding: 50px 25px;
        .login_btn,
        .register_btn {
            width: 100px;
            height: 36px;
            line-height: 36px;
            border-radius: 4px;
            margin: auto;
        }
        .login_btn {
            border: 1px solid var(--pink);
        }
    }

    .product_cnt {
        .title {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-direction: row;
                -ms-flex-direction: row;
                    flex-direction: row;
            -webkit-justify-content: flex-start;
                -ms-flex-pack: start;
                    justify-content: flex-start;
            line-height: 25px;
            img {
                width: 25px;
                height: 25px;
            }
        }
        .one {
            .item {
                background-color: rgb(255, 249, 231);
                border-radius: 4px;
                .lt {
                    color: #777;
                }
                .rt {
                    color: rgb(255, 249, 231);
                }
            }
            .active {
                .lt,.rt {
                    color: var(--pink);
                }
            }
        }
        .three {
            .input {
                height: 2rem;
                line-height: 2rem;
                border: 1px solid #FF9933;
                border-radius: 20px;
                input {
                    height: 2rem;
                    line-height: 2rem;
                }
                .button {
                    height: 30px;
                    line-height: 30px;
                    background-color: #FF9933;
                    border-radius: 0 20px 20px 0;
                }
            }
        }
        .four {
            .upload {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                .save_img,.upload_img {
                    width: 100px;
                    height: 150px;
                    line-height: 150px;
                    background-color: #f2f2f2;
                    background-size: cover;
                    background-position: center center;
                    background-repeat: no-repeat;
                }
            }

        }
    }
}

.sy_detail {
    .good_t {
        .sq_btn {
            width: 100px;
            height: 25px;
            line-height: 25px;
            border-radius: 20px;
            border: 1px solid #777;
        }
        .passed {
            border-color: var(--pink)!important;
        }
    }
    .no_sk {
        padding: 30px 10px;
    }
    .sk_pass {
        .item {
            .change_btn {
                padding: 3px 5px;
                border-radius: 3px;
                background-color: #FF9933;
            }
        }
    }
    .img-list .img {
        width: 90px;
        height: 160px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
    .img-list:nth-child(odd) {
        margin-right: 5px;
    }
    .img-list:nth-child(even) {
        margin-left: 5px;
    }
    .pj {
        .input {
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            border: 1px solid var(--pink);
            padding-left: 10px;
            input {
                height: 40px;
                line-height: 40px;
            }
            .btn {
                height: 38px;
                line-height: 38px;
                border-radius: 0 4px 4px 0;
            }
        }
    }
}
